<template>
  <div>
    <HeaderCom isDetail />
    <div class="main-box">
      <div class="main-center">
        <div class="search-box">
          <el-date-picker v-model="year" type="year" placeholder="选择时间" @change="handleSearch" />
        </div>
        <div class="photo-box" v-if="!isEmptyObject(imgMap)">
          <div v-for="(value, key, index) in imgMap" :key="index">
            <div class="title">{{ key.split(' ')[0] }}</div>
            <ul
              class="cards"
              @click="toggleTransition(item)"
              :class="{ transition: isTransitionActive && actIndex === item.photoId }"
              v-for="(item, ind) in value"
              :key="ind"
            >
              <li class="card" :class="'card-' + (i + 1)" v-for="(img, i) in item.photoList" :key="img">
                <img :src="img" @click.stop="checkPhoto(img)" />
                <div class="content">
                  <p>{{ value[0].remark }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div v-else>
          <el-empty :image-size="80" description="暂无照片" />
        </div>
        <Right v-if="actPhotos" :actPhotos="actPhotos" @closeModel="closeModel" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getPhoto } from '@/api/photo';
import HeaderCom from '@/pages/components/header/index.vue';
import { isEmptyObject } from '@/utils';
import dayjs from 'dayjs';
import { onMounted, ref } from 'vue';
import Right from './right.vue';

const loading = ref(false);
const year = ref(new Date());
const isTransitionActive = ref(false);
const actIndex = ref(0);
const actPhotos = ref('');
// 添加动画
const toggleTransition = (item) => {
  isTransitionActive.value = !isTransitionActive.value;
  actIndex.value = item.photoId;
};

const checkPhoto = (img) => {
  actPhotos.value = img || '';
};

const closeModel = () => {
  actPhotos.value = '';
};
// 搜索

// 处理没3个照片为一组
const chunkArray = (array, chunkSize) => {
  let result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    let chunk = array.slice(i, i + chunkSize);
    result.push(chunk);
  }
  return result;
};

// 查询数据
const imgMap = ref({});
const queryList = async () => {
  const data = {
    attributionTime: dayjs(year.value).format('YYYY') + '-01',
    pageNum: 1,
    pageSize: 500,
    type: 'year',
  };
  loading.value = true;
  const res = await getPhoto(data);
  if (res.code === 200) {
    const classifiedItems = res.data.rows.reduce((acc, item) => {
      // 如果当前 name 不在累加器中，则初始化为一个新数组
      if (!acc[item.attributionTime]) {
        acc[item.attributionTime] = [];
      }
      // 将当前项添加到对应 name 的数组中
      item.photoList = item.photoPath.split(',');
      if (item.photoList.length > 3) {
        const list = chunkArray(item.photoList, 3);
        const newList = list.map((i) => {
          return {
            ...item,
            photoList: i,
          };
        });
        acc[item.attributionTime] = [...acc[item.attributionTime], ...newList];
      } else {
        acc[item.attributionTime].push(item);
      }

      // 返回累加器以供下一次迭代
      return acc;
    }, {});
    imgMap.value = classifiedItems;
  }
  loading.value = false;
};

// 修改时间
const handleSearch = (val) => {
  queryList();
};
onMounted(() => {
  queryList();
});
</script>
<style scoped lang="scss">
@import '@/assets/style/photo';

.main-box {
  padding: 60px 0;

  .main-center {
    width: 60%;
    margin: 0 auto;

    .search-box {
      height: 100px;
      display: flex;
      align-items: center;
    }
  }

  .title {
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
